<template>
  <div :class="!$store.state.theme ?'comment':''">
    <vs-table>
      <template #thead>
        <vs-tr>
          <vs-th>评论文章</vs-th>
          <vs-th>用户</vs-th>
          <vs-th>评论内容</vs-th>
          <vs-th widvs-th="100">评论时间</vs-th>
          <vs-th>评论状态</vs-th>
          <vs-th>操作</vs-th>
        </vs-tr>
      </template>

      <template #tbody>
        <vs-tr class="tbody" v-for="item in data" :key="item._id">
          <vs-td>{{ item.articleTitle }}</vs-td>
          <vs-td>{{ item.username }}</vs-td>
          <vs-td>{{ item.content }}</vs-td>
          <vs-td>{{ item.date }}</vs-td>
          <vs-td>
            <vs-switch style="width:60px" @change="statusChange(item._id, item.status)" v-model="item.status">
        <template #off>
            隐藏
        </template>
        <template #on>
            显示
        </template>
      </vs-switch>
          </vs-td>
          <vs-td>
            <vs-button size="xl" transparent @click="delone(item._id, item.status)">
                <i class="el-icon-delete"></i>
              </vs-button>
          </vs-td>
        </vs-tr>
      </template>
    </vs-table>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { commlistAPI, commdelAPI, commputAPI } from "../../api/index"
export default {
  data () {
    return {
      data: [],
    }
  },
  methods: {
    async statusChange (id, status) {
      console.log(id, status)
      await commputAPI(id, status)
    },
    delone (id) {
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await commdelAPI(id)
          this.$store.state.managerrefresh++
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          })
        })
    },
  },
  async mounted () {
    let {data=[]} = await commlistAPI()
    const res = data.data.map(item=>({...item,date:dayjs(item.date).format('YYYY-MM-DD')}))
    this.data = res
  },
};
</script>

<style lang='less' scoped>
.comment {
  text-shadow: 1px 1px #000;

}
</style>